<template>
  <div>
    <div class="search-bar" :class="{'hide-title': !titleVisible, 'hide-shadow': !shadowVisible}">
    <transition
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <div class="search-bar-title-wrapper" v-show="titleVisible">
        <div class="title-text-wrapper">
          <span class="title-text title">{{$t('home.title')}}</span>
        </div>
        <div class="title-icon-shake-wrapper" @click="showFlapCard">
          <span class="iconfont icon">&#xe608;</span>
        </div>
      </div>
    </transition>
    <!--      根据动态绑定的move-icon进行移动图片， 原理设置高度，且居中，位置即移动-->
    <div class="title-icon-back-wrapper" :class="{'move-icon':!titleVisible}" @click="back">
      <span class="iconfont icon">&#xe744;</span>
    </div>
    <div class="search-bar-input-wrapper" :class="{'hide-title':!titleVisible}">
      <div class="search-bar-blank" :class="{'show-blank':!titleVisible}"></div>
      <div class="search-bar-input">
        <span class="iconfont icon">&#xe688;</span>
        <input
          class="input"
          type="text"
          :placeholder="$t('home.hint')"
          v-model="searchText"
          @click="showHotSearch"
          @keyup.13.exact="search"
        >
      </div>
    </div>
  </div>
    <!--     列表页-->
    <hot-search-list v-show="hotSearchVisible" ref="hotSearch"></hot-search-list>
  </div>
</template>

<script>
import { storeHomeMixin } from '../../utils/mixin'
import HotSearchList from './HotSearchList'

export default {
  name: 'SearchBar',
  components: { HotSearchList },
  mixins: [storeHomeMixin],
  data () {
    return {
      searchText: '',
      titleVisible: true,
      shadowVisible: false,
      hotSearchVisible: false
    }
  },
  watch: {
    offsetY (offsetY) {
      // 根据偏移量来设置css的改变
      if (offsetY > 0) {
        this.hideTitle()
        this.showShadow()
      } else {
        this.showTitle()
        this.hideShadow()
      }
    },
    hotSearchOffsetY (offsetY) {
      if (offsetY > 0) {
        this.showShadow()
      } else {
        this.hideShadow()
      }
    }
  },
  methods: {
    // 按回车搜索跳转到相应路由，并将输入文本作为参数发送过去，使用query,可以在url上观看
    search () {
      this.$router.push({
        path: '/store/list',
        query: {
          keyword: this.searchText
        }
      })
    },
    // 改变vuex中的值来显示推荐小卡片
    showFlapCard () {
      this.setFlapCardVisible(true)
    },
    // 根据偏移量来进行返回操作，以及css控制
    back () {
      if (this.offsetY > 0) {
        this.showShadow()
      } else {
        this.hideShadow()
      }
      if (this.hotSearchVisible) {
        this.hideHotSearch()
      } else {
        this.$router.push('/store/shelf')
      }
      this.hideHotSearch()
    },
    hideHotSearch () {
      this.hotSearchVisible = false
      if (this.offsetY > 0) {
        this.hideTitle()
        this.showShadow()
      } else {
        this.showTitle()
        this.hideShadow()
      }
    },
    showHotSearch () {
      this.hideTitle()
      this.hideShadow()
      this.hotSearchVisible = true
      // 进入页面
      // 由于刷新需要等待dom结构渲染完毕后再刷新，所以需要等待前面执行完毕后再执行
      this.$nextTick(() => {
        this.$refs.hotSearch.reset()
      })
    },
    hideTitle () {
      this.titleVisible = false
    },
    showTitle () {
      this.titleVisible = true
    },
    hideShadow () {
      this.shadowVisible = false
    },
    showShadow () {
      this.shadowVisible = true
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .search-bar
    position: relative
    z-index: 150
    width: 100%
    height: px2rem(94)
    box-shadow: 0 px2rem(2) px2rem(2) 0 rgba(0, 0, 0, .1)
    &.hide-title
      height: px2rem(52)
    &.hide-shadow
      box-shadow: none
    .search-bar-title-wrapper
      position: absolute
      width: 100%
      top: 0
      left: 0
      height: px2rem(42)
      .title-text-wrapper
        width: 100%
        height: px2rem(42)
        center()
      .title-icon-shake-wrapper
        position: absolute
        right: px2rem(15)
        top: 0
        height: px2rem(42)
        center()
    .title-icon-back-wrapper
      position: absolute
      z-index: 150
      left: px2rem(15)
      top: 0
      height: px2rem(42)
      transition: top $animationTime $animationType
      center()
    .move-icon
      height: px2rem(52)
    .search-bar-input-wrapper
      background: white
      position: absolute
      top: px2rem(42)
      left: 0
      width: 100%
      display: flex
      height: px2rem(52)
      padding: px2rem(10)
      box-sizing: border-box
      transition: top $animationTime $animationType
      &.hide-title
        top: 0
      .search-bar-input
        width: 100%
        flex: 1
        background: #f4f4f4
        border-radius: px2rem(20)
        padding: px2rem(5) px2rem(15)
        box-sizing: border-box
        leftStyle()
        .icon
          color: #999
        .input
          width: 100%
          height: px2rem(22)
          background: transparent
          border: none
          margin-left: px2rem(10)
          font-size: px2rem(12)
          color: #666
          &:focus
            outline: none
          &::-webkit-input-placeholder
            color: #ccc
    .search-bar-blank
      flex: 0 0 0
      width: 0
      transition: all $animationTime $animationType
      &.show-blank
        flex: 0 0 px2rem(31)
        width: px2rem(31)
</style>
